章导学：菜单交互与响应式进阶
本章是整个课程从"组件基础"向"业务实战"过渡的关键节点。核心目标是将之前开发的基础组件（Menu、Table、Theme）组装成一个完整的管理后台布局，并实现响应式交互——屏幕缩小时菜单自动折叠，放大后自动展开，移动端则切换为抽屉模式。
本章学习目标
核心目标
- 完成 DefaultLayout 布局：左右分栏 + 头部工具栏 + 内容区，这是管理后台最经典的布局形态。
- 实现菜单交互：折叠/展开、多级菜单自动展开、路由跳转、4种导航模式切换。
- 响应式设计：桌面端固定侧栏，移动端 Drawer 抽屉，工具栏自适应。
- 登录注册表单：作为后续动态表单的铺垫，掌握
el-form的校验体系。
章节结构
第1周：表格组件（V1/V2 选型、虚拟滚动原理、基础封装）
├── 1-1 需求分析 & 虚拟滚动原理
├── 1-2 基础表格组件封装
├── 1-3 进阶：Slot 传参
└── 1-4 移动端适配
第2周：菜单组件（SubMenu、MenuItem、递归渲染）
├── 2-1 菜单需求分析
├── 2-2 组件结构与 Props 类型
├── 2-3 SubMenu 递归渲染
└── 2-4 MenuItem 三种场景
第3周：布局组件（DefaultLayout、Header、ThemeSettings）
├── 3-1 ~ 3-6 布局与事件传递
├── 3-7 ~ 3-9 四种导航模式
└── 3-10 开发习惯总结
第4周：功能完善（样式优化、国际化、路由跳转、自动展开）
第5周：源码学习 & 响应式 Drawer
第6周：登录注册表单（el-form 校验体系）
text
响应式交互效果预览
| 屏幕宽度 | 菜单状态 | 工具栏 |
|---|---|---|
| >= 1024px | 固定侧栏，完整显示 | 全部工具可见 |
| 768px ~ 1024px | 可折叠侧栏 | 部分工具隐藏 |
| < 768px | 抽屉模式，默认隐藏 | 最小化工具栏 |
当屏幕宽度小于 1024px 时，左侧菜单自动折叠；小于 768px 时，菜单完全隐藏，用户需要点击汉堡按钮打开 Drawer 抽屉。
本节小结
本章是"从组件到布局"的桥梁。学习路径是：先完成表格组件的选型和封装，再构建菜单组件的递归渲染体系，然后组装成完整的 DefaultLayout，最后实现登录注册表单。每一层都建立在前一层的基础上，逐步构建出一个功能完整的管理后台。
↑